<template>
  <div class="box">
    <div style="height: 40px">
      <NavBack title="商品分类" :hasBack="true"></NavBack>
    </div>
    <div class="content-box">
      <van-sidebar v-model="active" style="width: 90px">
        <van-sidebar-item
          v-for="item in categoryList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
      <div style="flex: 1">
        <van-grid :column-num="3">
          <van-grid-item
            v-for="item in brandList"
            :key="item.brand"
            icon="photo-o"
            :text="item.brand"
            @click="golist(item.brand)"
          />
        </van-grid>
      </div>
    </div>
    <div style="height: 50px">
      <MyFooter></MyFooter>
    </div>
  </div>
</template>
  
  <script>
import MyFooter from "../../components/footer.vue";
import NavBack from "../../components/NavBack.vue";

export default {
  components: { MyFooter, NavBack },
  data() {
    return {
      active: 0,
      categoryList: [],
      brandList: [],
    };
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    golist(brand) {
      // console.log(a);
      // console.log(this.categoryList[this.active]);
      this.$router.push({
        path: "/list",
        query: {
          category:this.categoryList[this.active],
          brand:brand
        },
      });
    },
    getCategoryList() {
      this.$http({
        url: "/pro/categorylist",
      }).then((res) => {
        if (res.data.code === "200") {
          this.categoryList = res.data.data;
          // console.log(res.data.data);
          this.getBrandList();
        }
      });
    },
    getBrandList() {
      this.$http({
        url: "/pro/categorybrandlist",
        params: {
          category: this.categoryList[this.active],
        },
      }).then((res) => {
        if (res.data.code === "200") {
          this.brandList = res.data.data;
        }
      });
    },
  },
  watch: {
    active: function () {
      this.getBrandList();
    },
  },
};
</script>
  
  <style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.content-box {
  flex: 1;
  width: 100%;
  display: flex;
  overflow-y: hidden;
}

.van-sidebar {
  height: 100%;
}
</style>
  